import { Component } from 'react'
import { connect } from 'react-redux'
import Taro from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { AtButton, AtInput, AtList, AtListItem, AtNoticebar } from 'taro-ui'
import classnames from 'classnames'

import * as api from 'src/api'
import { getUserInfo } from 'src/store/slice/user'
import withPage from 'src/utils/withPage'

import './index.scss'

type PageStateProps = {
  userInfo: { [key: string]: any }
}

type PageDispatchProps = {
  getUserInfo: () => any
}

type PageOwnProps = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

type IState = {
  avatar: string
  nickname: string
  phone: string
  realName: string
  cardId: string
  userNo?: string
}

interface Index {
  props: IProps
  state: IState
}

const connectRedux: Function = connect

@connectRedux(
  ({ user }) => ({
    userInfo: user.userInfo,
  }),
  (dispatch) => ({
    getUserInfo() {
      return dispatch(getUserInfo())
    },
  })
)
@withPage()
class Index extends Component {
  state: IState = {
    avatar: '',
    nickname: '',
    phone: '',
    realName: '',
    cardId: '',
  }
  componentWillMount() {}

  async onLoad() {
    const res = await this.props.getUserInfo()
    this.setState({
      avatar: res.avatar,
      nickname: res.nickname,
      phone: res.phone,
      realName: res.realName,
      cardId: res.cardId,
      userNo: res.userNo,
    })
  }

  getUserProfile = async () => {
    const { userInfo } = await Taro.getUserProfile({ desc: '用于完善会员资料' })
    this.setState({
      avatar: userInfo.avatarUrl,
      nickname: userInfo.nickName,
    })
  }

  getPhoneNumber = async (e) => {
    const res = await api.userBindPhone(e.detail)
    this.setState({ phone: res })
  }

  handleChange = (key, e) => {
    this.setState({ [key]: e })
  }

  handleSubmit = async () => {
    Taro.showLoading()
    const { avatar, nickname, phone, realName, cardId } = this.state
    const value = {
      avatar,
      nickname,
      phone,
      realName,
      cardId,
    }
    if (!value.nickname) {
      return Taro.showToast({ title: '昵称不能为空', icon: 'none' })
    }
    if (!value.phone) {
      return Taro.showToast({ title: '请获取手机号码', icon: 'none' })
    }
    // if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone)) {
    //   return Taro.showToast({ title: '请填写正确的手机号码', icon: 'none'  })
    // }
    if (!value.realName) {
      return Taro.showToast({ title: '请填写姓名', icon: 'none' })
    }
    if (!value.cardId) {
      return Taro.showToast({ title: '请填写身份证号', icon: 'none' })
    }
    await api.userEdit(value)
    Taro.hideLoading()
    Taro.showToast({
      title: '更新成功',
      icon: 'success',
    })
    Taro.navigateBack()
  }

  handleSetting = () => {
    Taro.openSetting()
  }

  render() {
    const { avatar, nickname, phone, realName, cardId, userNo } = this.state
    return (
      <View className="user-profile">
        <View className="avatar at-row at-row__align--center">
          <View className="lable">头像</View>
          <View className="pictrue">
            <Image src={avatar}></Image>
            {/* <Image
              className="alter"
              src={require('src/static/images/edit.png')}
            ></Image> */}
          </View>
          <AtButton
            className="user-btn"
            size="small"
            circle
            onClick={this.getUserProfile}
          >
            点击获取
          </AtButton>
        </View>
        <AtInput
          name="nickname"
          title="昵称"
          type="text"
          placeholder="请输入昵称"
          value={nickname}
          onChange={(e) => this.handleChange('nickname', e)}
        />
        {/* <AtInput
          name="phone"
          title="手机号码"
          type="phone"
          value={phone}
          onChange={() => this.handleChange('phone', phone)}
        > */}
        {/* <AtButton
            className="phone-btn"
            size="small"
            circle
            openType="getPhoneNumber"
            onGetPhoneNumber={this.getPhoneNumber}
          >
            点击获取
          </AtButton> */}
        {/* </AtInput> */}
        {/* <AtInput
          name="realName"
          title="姓名"
          type="text"
          placeholder="请输入姓名"
          value={realName}
          onChange={(e) => this.handleChange('realName', e)}
        />
        <AtInput
          name="cardId"
          title="身份证"
          type="idcard"
          placeholder="请输入身份证号码"
          value={cardId}
          onChange={(e) => this.handleChange('cardId', e)}
        /> */}
        <AtList>
          <AtListItem
            title="手机号码"
            extraText={phone || '未绑定手机号'}
            arrow="right"
          />
          <AtListItem
            className={classnames({ 'user-no': !userNo })}
            title="会员卡号"
            extraText={userNo || '请联系店铺补充您的实体会员卡号'}
            arrow="right"
          />
          <AtListItem
            title="权限设置"
            extraText="点击管理"
            arrow="right"
            onClick={this.handleSetting}
          />
        </AtList>
        <AtNoticebar icon="alert-circle">
          收集你的信息用于完善会员资料，确定是否已成为店铺会员，保证会员的唯一性。
        </AtNoticebar>
        <AtButton
          className="submit"
          type="primary"
          circle
          onClick={this.handleSubmit}
        >
          保存修改
        </AtButton>
      </View>
    )
  }
}

export default Index
